import React, { useState } from 'react'
import './index.scss'
import { LeftOutline, CloseOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'

/**
 * 入院证确认页面组件
 * 功能：显示患者入院证信息，支持切换不同患者查看对应的入院证
 */
function Ryqr() {
  const navigate = useNavigate()

  // 状态管理
  const [showModal, setShowModal] = useState(false) // 控制选择就诊人模态框的显示/隐藏
  const [selectedPatient, setSelectedPatient] = useState('王小美') // 当前选中的患者姓名

  /**
   * 处理切换按钮点击事件
   * 显示选择就诊人的模态框
   */
  const handleSwitch = () => {
    setShowModal(true)
  }

  /**
   * 关闭模态框
   */
  const handleCloseModal = () => {
    setShowModal(false)
  }

  /**
   * 选择患者
   * @param {string} patientName - 患者姓名
   */
  const handleSelectPatient = (patientName: string) => {
    setSelectedPatient(patientName) // 更新选中的患者
    setShowModal(false) // 关闭模态框
  }

  /**
   * 患者数据列表
   * 包含每个患者的完整入院证信息
   */
  const patients = [
    {
      name: '王小美',
      id: '2015****10',
      gender: '女',
      age: '25岁',
      department: '门诊内一科',
      doctor: '刘医生',
      time: '2020-01-01 15:20:20',
      diagnosis: '肺部阴影'
    },
    {
      name: '李玲玲',
      id: '2015****11',
      gender: '女',
      age: '30岁',
      department: '门诊外一科',
      doctor: '张医生',
      time: '2020-01-02 09:15:30',
      diagnosis: '高血压'
    }
  ]

  // 获取当前选中患者的完整信息
  const currentPatient = patients.find(p => p.name === selectedPatient) || patients[0]

  return (
    <div className='ryqr'>
      {/* 页面顶部导航栏 */}
      <div className='ryqr-top'>
        <span><LeftOutline className='ryqr-top-left' onClick={() => navigate(-1)} /></span>
        <span className='ryqr-top-title'>入院证确认</span>
      </div>

      {/* 患者信息卡片区域 */}
      <div className='ryqr-bg'>
        <div className='account-card'>
          {/* 患者基本信息 */}
          <div className='account-info'>
            <div className='account-name'>{currentPatient.name}</div>
            <div className='account-id'>{currentPatient.id}</div>
          </div>
          {/* 切换患者按钮 */}
          <div className='account-switch' onClick={handleSwitch}>
            <div className='switch-icon'>
              {/* 切换图标：人员双向箭头 */}
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M16 17L21 12L16 7" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M21 12H9" stroke="#1890ff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke="#333" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </div>
            <span className='switch-text'>切换</span>
          </div>
        </div>
      </div>

      {/* 入院证详细信息区域 */}
      <div className='admission-certificate'>
        {/* 入院证标题和状态 */}
        <div className='certificate-header'>
          <span className='certificate-title'>入院证</span>
          <span className='status-badge'>未登记</span>
        </div>
        {/* 患者详细信息列表 */}
        <div className='certificate-content'>
          <div className='patient-info'>
            <div className='info-row'>

              <span className='value'>{currentPatient.name}</span>
              <span className='value'>{currentPatient.gender}</span>
              <span className='value'>{currentPatient.age}</span>
            </div>
            <div className='info-row'>
              <span className='label'>入院科室：</span>
              <span className='value'>{currentPatient.department}</span>
            </div>
            <div className='info-row'>
              <span className='label'>开证医生：</span>
              <span className='value'>{currentPatient.doctor}</span>
            </div>
            <div className='info-row'>
              <span className='label'>开证时间：</span>
              <span className='value'>{currentPatient.time}</span>
            </div>
            <div className='info-row'>
              <span className='label'>入院诊断：</span>
              <span className='value'>{currentPatient.diagnosis}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 门诊患者入院程序提示 */}
      <div className='admission-procedure'>
        <div className='procedure-card'>
          <div className='procedure-title'>门诊患者入院程序提示</div>
          <div className='procedure-steps'>
            <div className='step-item'>
              <span className='step-number'>(1)</span>
              <span className='step-text'>门诊医生在初步评估患者的基础上，对确需住院治疗的患者，根据医院提供的服务范围和设施能否满足其诊疗的需要，如能满足其需要，则决定患者入院并开具入院申请单及核酸检测单。</span>
            </div>
            <div className='step-item'>
              <span className='step-number'>(2)</span>
              <span className='step-text'>入院患者持入院申请单，普通患者先行核酸检测，待报告为阴性后自行到入院处及科室(病区)办理入院。如患者行动不便或病情较重，则由相关部门通知勤务中心,协助患者及家属按流程办理入院手续。</span>
            </div>
            <div className='step-item'>
              <span className='step-number'>(3)</span>
              <span className='step-text'>病区护士收到入院申请单后,热情接待患者，检查患者及家属的核酸报告，确认无殊后，妥善安排患者床位并落实病情评估、入科宣教等工作。</span>
            </div>
            <div className='step-item'>
              <span className='step-number'>(4)</span>
              <span className='step-text'>通知主管医生查看患者，并及时执行医嘱。</span>
            </div>
          </div>
        </div>
      </div>

      {/* 选择就诊人模态框 */}
      {showModal && (
        <div className='modal-overlay' onClick={handleCloseModal}>
          <div className='modal-content' onClick={(e) => e.stopPropagation()}>
            {/* 模态框头部 */}
            <div className='modal-header'>
              <span className='modal-title'>选择就诊人</span>
              <CloseOutline className='close-btn' onClick={handleCloseModal} />
            </div>
            {/* 患者列表 */}
            <div className='patient-list'>
              {patients.map((patient, index) => (
                <div
                  key={index}
                  className={`patient-item ${selectedPatient === patient.name ? 'selected' : ''}`}
                  onClick={() => handleSelectPatient(patient.name)}
                >
                  <span className='patient-name'>{patient.name}</span>
                  <span className='patient-id'>{patient.id}</span>
                </div>
              ))}
            </div>
            {/* 模态框底部按钮 */}
            <div className='modal-footer'>
              <button className='add-patient-btn'>添加就诊人</button>
            </div>
          </div>
        </div>
      )}

      {/* 固定在底部的确认按钮 */}
      <div className='fixed-bottom-button'>
        <button className='confirm-button' onClick={() => navigate('/rydj')}>
          我已确认,并进入下一步
        </button>
      </div>
    </div>
  )
}

export default Ryqr